<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>这是网页的标题</title>
	</head>
	<body>
		<!-- left mark-up -->





<!-- right mark-up -->
<div style="background: green;">
<div class="half" style="background: gold;width: 50%;">50% wide</div>
<div class="half" style="background: saddlebrown;width: 50%;">50% wide</div>
<!--上面的两块目前在二行想让他变成两行就必须把两个div在代码书写时没有回车，如下-->
<div class="half" style="background: gold;width: 50%;">50% wide</div><div class="half" style="background: saddlebrown;width: 50%;">50% wide</div>
</div>
<style type="text/css">
  .half { display:inline-block;
  		padding: 0px;
          }
          *{
          	border: 0px;
          }
</style>

<div style="background: saddlebrown;width: 150px;height: 150px;text-align: center;line-height: 150px;">
	<div id="" style="width: 50px;height: 50px;background: sandybrown;display: inline-block;">
		
	</div>
</div>
<div style="background:red;width: 150px;height: 150px;vertical-align: middle;display: table-cell;text-align: center;">
	<img src="img/qianfenglogo.png" />
</div>
	<div style="background: saddlebrown;">
		<img src="img/qianfenglogo.png" style="vertical-align: middle;" />
	</div>
		<!--<div style="background: chartreuse;width: 333px;height: 555px;"></div>-->
		<img src="img/qianfenglogo.png"  />
	</body>
</html>